<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/market/marketingPlay' }"> <i class="el-icon-lx-cascades"></i> 营销玩法
                </el-breadcrumb-item>
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 请好友看 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="输入专栏名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column label="专栏图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" alt="" class="info-image" />
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="专栏名称"></el-table-column>
                <el-table-column prop="fen_num_limit" label="分享上限"></el-table-column>
                <el-table-column prop="ling_num_limit" label="领取上限"></el-table-column>
                <el-table-column prop="ling_num" label="领取数量"></el-table-column>
                    <el-table-column label="请好友看"
                        ><template slot-scope="scope">{{ scope.row.is_share_use == 0 ? '关闭' : '开启' }}</template></el-table-column
                    >
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button @click="set(scope.row)" type="success" size="mini">设置</el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <router-view></router-view>
        <!-- 设置弹出框 -->
        <el-dialog title="设置" :visible.sync="showDialog" width="30%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="商品名称">{{ form.title }}</el-form-item>
                <el-form-item label="请好友看">
                    <el-radio-group v-model="form.is_share_use">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分享上限">
                    <el-radio-group v-model="shareLimit_status">
                        <el-radio :label="0">不限制</el-radio>
                        <el-radio :label="1"
                            >自定义<el-input v-model="form.fen_num_limit" size="mini" style="width: 100px; margin-left: 10px"></el-input
                        ></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="领取上限">
                    <el-input v-model="form.ling_num_limit" size="mini" style="width: 100px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { inviteFriendSeeListData, setInviteFriendSeeData } from '../../api/index';
export default {
    // name: 'inviteFriendSee',
    data() {
        return {
            query: {
                page: 1,
                rows: 4,
                keyword: ''
            },
            form: {
                title: '',
                is_share_use: '',
                fen_num_limit: '',
                ling_num_limit: ''
            },
            shareLimit_status: '',
            tableData: [],
            showDialog: false,
            pageTotal: 0
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            inviteFriendSeeListData(this.query).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        // 搜索
        handleSearch() {
            this.$set(this.query);
            this.getData();
        },

        //设置
        set(row) {
            this.showDialog = true;
            this.form = row;
            if (row.fen_num_limit == 0) {
                this.shareLimit_status = 0;
                this.form.fen_num_limit = '';
            } else {
                this.shareLimit_status = 1;
            }
        },
        //取消
        cancel() {
            this.showDialog = false;
        },
        //确定
        save() {
            setInviteFriendSeeData(this.form).then((res) => {
                if (res.code == 1) {
                    this.showDialog = false;
                    this.$message.success('设置成功');
                    this.getData();
                }
            });
        },
        // 分页
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    float: right;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}
.info-image {
    height: 64px;
    width: 80px;
    border-radius: 4px;
}
</style>